<template>
	<view class="">
		<scroll-view scroll-y="true" @scrolltolower="zxc_onReachBottom" style="height: 90vh;">
			<view>
				<view class="flex-between historyitem" v-for="i in bglist"
					@click="$goTo('pages/paipan/ppdetail/ppdetail?id=' + i.id)">
					<view class="">
						<text>{{i.name}}</text>
						<text class="u-m-lr-10">{{i.gender==1?'男':'女'}}</text>
						<text>{{i.year}}-{{i.month}}-{{i.day}}</text>
					</view>
					<view class="flex-a-c">
						<view class="" @click.stop="$goTo('pages/paipan/changepp/changepp?id=' +i.id)">
							<u-icon size=20 name='edit-pen-fill'></u-icon>
						</view>
						<view class="u-m-lr-10" @click.stop="show=true,getremark(i.id)">
							<u-icon size=20 name='coupon'></u-icon>
						</view>
						<view class="" @click.stop="deletebg(i.id)">
							<u-icon size=20 name='close-circle'></u-icon>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup round=10 mode="center" :show="show" @close="show=false">
			<view style="width: 600rpx; height: 300rpx; " class="u-p-30 ">
				<view class="u-m-tb-20">备注：</view>
				<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
				<view class="surebox u-m-tb-20" @click="addrearm">
					<view class="suretext">
						确定
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				page: 1,
				bglist: [],
				show: false,

			}	
		},

		mounted() {
			var that = this
			uni.$on('update', function(data) {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.bglist = []
				that.page = 1
				that.init()
			})
			that.init()
		

		},


		methods: {
			zxc_onReachBottom() {
				this.page++
				this.init()
			},
			
			init() {
				this.$api.get('/user/ba_zi_list', {
					page: this.page,
					size: 10
				}).then(res => {
					if(res.data.length>0){
						res.data = res.data
						this.bglist = [...this.bglist, ...res.data]
						
					}else{
						return this.page--
					}
				})
			},
			//获取备注
			getremark(id) {
				this.id = id
				this.$api.get('/user/ba_zi_remark', {
					id
				}).then(res => {
					this.value1 = res.data.remark
				})
			},
			//添加记录
			addrearm() {
				this.$api.post('/user/ba_zi_edit', {
					remark: this.value1,
					id: this.id
				}).then(res => {
					this.show = false
				})
			},
			//删除记录
			deletebg(id) {
				let that = this
				uni.showModal({
					content: '确定删除该条记录吗？',
					success: function(res) {
						if (res.confirm) {
							that.$api.post('/user/ba_zi_del', {
								id: id
							}).then(res => {
								that.bglist = []
								that.page = 1
								that.init()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.historyitem {
		padding: 20rpx;
		border: 1rpx solid rgba(0, 0, 0, .125);
		;
		box-sizing: border-box;
		width: 700rpx;
		margin: 20rpx auto;
	}

	.surebox {
		display: flex;
		justify-content: flex-end;
	}

	.suretext {
		border-radius: 8rpx;
		padding: 6rpx 14rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #4179ff;
	}
</style>